<template>
	<view class="content">
		<view class="nav">
			<view>杭州梦想小镇</view>
			<view> <input  class="bian" type="text" placeholder="永辉超市优惠商品" /></view>
		</view>
		<view class="tupian">
			<image class="tu" src="/static/imgs/assets/02.jpg"></image>
		</view>
		<view class="fenlei">
			<view class="fenlei-left">
				<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/super.png"></image>
				<view>超市便利</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/basket.png"></image>
				<view>菜市场</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/fruits.png"></image>
				<view>水果店</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/flower.png"></image>
				<view>鲜花绿植</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/drug.png"></image>
				<view>医药健康</view>
			</view></view>
			<view class="fenlei-right">
				<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/home.png"></image>
				<view>家居时尚</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/cake.png"></image>
				<view>烘焙蛋糕</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/sign.png"></image>
				<view>签到</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/prestige.png"></image>
				<view>大牌免运</view>
			</view>
			<view class="fenleiliebiao">
				<image class="liebiaotu" src="/static/imgs/assets/red.png"></image>
				<view>红包套餐</view>
			</view></view>

			
		</view>
		<view class="dianpu">
			<view class="fujindianpu">
				<view>附近店铺</view>
				<view @click="goto('/pages/many/index')">查看更多</view>
			</view>
			<view v-for="item in supermarket" :key="item._id" @click="handleClick(item._id)">
				<view class="remen" >
					<image class="superimg" :src="item.imgUrl"></image>
					<view class="superxinxi">
						<view style="font-weight:600;">
							{{item.name}}
						</view>
						<view>月送：{{item.sales}}&nbsp;&nbsp;&nbsp;起送：{{item.expressLimit}}&nbsp;&nbsp;&nbsp;基础运费：{{item.expressPrice}}</view>
						<view style="color:red;">{{item.slogan}}</view>
						</view>
				</view>
				
				
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import  config  from '@/config'
	
	export default {
		data() {
			return {
				supermarket:[]
			}
		},
		onLoad() {
			this.show();
		},
		methods: {
			show(){
				uni.request({
					url: config.API_HOST+'/hotList',
					success: (res) => {
						this.supermarket=res.data
					}
				});
			},
			goto(url) {
				uni.navigateTo({
					url:url
				})
			},
			handleClick(id) {
            console.log('点击的商品 id 是:', id);
            uni.navigateTo({
                url: `/pages/super/index?id=${id}`
            });
        }
		}
	}
</script>

<style>
*{
	margin: 0;
	padding: 0;
}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.nav{
		display: flex;
		flex-direction:column;
		justify-content: space-around;
		background-color: rgb(68, 159, 233);
		width: 100%;
		height: 150rpx;
		padding: 20rpx;
	}
	.bian{
		border: 1px solid white;
		border-radius: 2ch;
		background-color: aliceblue;
		height: 50rpx;
		}
	.tupian{
		width: 100%;
		height: 220rpx;

	}
	.tupian image{
		width: 100%;
		height: 100%;
	}
	.fenlei{
		width: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom, rgb(105, 160, 233), rgb(243, 244, 245));
		text-align: center;
	}
	.fenlei-left ,.fenlei-right{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.fenleiliebiao{
		width: 130rpx;
		margin: 12rpx;
	}
	.liebiaotu{
		width: 100rpx;
		height: 100rpx;
	}
	.dianpu{
		width: 100%;
	}
	.fujindianpu{
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
	}
	.remen{
		width: 90%;
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.superxinxi{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.superimg{
		width: 150rpx;
		height: 150rpx;
	}
	
</style>
